//对账单
Vue.component('account_statements', {
	template: '<div class="statement">\
					<div class="one_news my_flex my_flex_col cursor" v-for="(item,index) in notices">\
						<div class="my_flex my_flex_between">\
							<span>{{item.Title}}</span>\
						</div>\
						<div class="my_flex my_flex_between">\
							<span>{{item.ProductName}}</span>\
						</div>\
						<div class="my_flex my_flex_between">\
							<div class="my_flex my_flex_between">\
								<span>产品金额：<span class="money">{{item.ProductAmount}}</span>{{item.PolicyAmountCurrencyTypeName}}</span>\
								<span>佣金：<span class="money">{{item.Commission}}</span>{{item.CommissionCurrencyTypeName}}</span>\
							</div>\
							<span class="time">预计发放时间：{{item.GrantTimeText | translate_time}}</span>\
						</div>\
						<div>\
							<span>内容：{{item.Content}}</span>\
						</div>\
						<div>\
							备注：{{item.Remark}}\
						</div>\
						<account_verification_code :item="item" @confirm_account_statement="confirmAccountStatement" :Tel="userInfo.Mobile" Intervals="" Get_code="" wait_code=""></account_verification_code>\
					</div>\
					<change-page :current_page="page.pageIndex" :page_size="page.pageSize" :page_total="page.pageTotal" @page-change="getAccountStatements"></change-page>\
				</div>',
	data: function() {
		return {
			url: {
				getAccountStatements: '/api/AccountStatement/GetAccountStatements',
				confirmAccountStatement:'/api/AccountStatement/ConfirmAccountStatement', //确认对账单
			},
			notices: [],
			page: {
				pageIndex: 1,
				pageSize: 100,
				pageTotal: 0
			},
			userInfo:globalData.getUserInfo(),
		}
	},
	mounted: function() {
		this.getAccountStatements(this.page.pageIndex, this.page.pageSize);
	},
	computed: {
		
	},
	methods: {
		getAccountStatements:function(curPage, pageSize) {
			var that = this;
			var data = {
				PageIndex: curPage,
				PageSize: pageSize
			};
			globalData.ajaxPost(that.url.getAccountStatements, data, function(res) {
				var d = res.data;
				d = globalData.utils.notNullDefaulst(d,[]);
				globalData.utils.page(that, curPage, res.count);
				that.notices = d;
			})
		},
		confirmAccountStatement:function(code,item){
			var that = this;
			var data = {
				'ID':item.ID,
				'ValidateCode':code
			}
			globalData.ajaxPost(this.url.confirmAccountStatement,data,function(res) {				
				console.log(res)
				if(res.suc){
					that.getAccountStatements(that.page.pageIndex, that.page.pageSize);
					$("#alert").modal()
					$("#alert p").text("确认成功")					
				}
			})
		}
	},
	filters:{
		translate_time:function(val){
			return val.replace(/\//g,"-")
		}
	}
});




// 注册
Vue.component('account_verification_code', {
	props: ['Tel','Intervals','Get_code','Wait_code','type',"item"],
	template: '<form class="form-horizontal form" style="width: 100%;margin-top: 15px;" role="form">\
					<div class="form-group" >\
						<div class="col-sm-3" style="padding-left: 0;padding-right: 0;">\
							<input type="text" v-model="input_code"  onkeyup="this.value=this.value.replace(/\D/g,\'\')" onafterpaste="this.value=this.value.replace(/\D/g,\'\')" maxlength="4" required="required" v-on:input="err=false"  class="no_padding form-control" placeholder="Verification Code" >\
						</div>\
						<div class="col-sm-3" style="padding-left: 0;padding-right: 0;padding-right: 0;">\
							<button @click.prevent="getCode" :class=\'[{"btn-base":isCode}]\' class="btn no_padding btn-block" style="height:34px;">{{time}}{{code_tips}}</button>\
						</div>\
						<div class="col-sm-5 col-sm-offset-1" style="padding-left: 0;padding-right: 0;padding-right: 0;">\
							<button  style="width: 100%;" @click.prevent="check_code" class="btn no_padding btn-block btn-base" style="font-size: 10px;height:34px;">确 认</button>\
						</div>\
					</div>\
				</form>',
	data: function() {
		return {
			time: '',
			code_tips: this.Get_code || '获取验证码',
			intervals:this.Intervals || 60,
			get_code:this.Get_code || '获取验证码',
			wait_code:this.Wait_code || '秒后获取',
			url:{
				getRegCode: '/api/Home/CheckMobileMsgCode',
				getUserCode: '/api/Home/CheckMobileMsgCodeForUserID',
			},
			input_code:"",//输入input
			code:'', //后台返回验证码
			item:this.item,
		}
	},
	mounted: function() {
		
	},
	computed: {
		isCode: function() {
			var tel = /^1\d{10}$/
			return(tel.test(this.Tel) && this.time == '')		
		},
		code_valide:function(){
			var code = /\d{4}$/
			return code.test(this.code)
		}
	},
	methods: {
		reset_code:function(){
			this.time = ""
			this.code_tips = this.Get_code || '获取验证码'
			this.input_code = ""
			this.code = ""
		},
		getCode: function() {
			var that = this
			if(!that.isCode) {
				return
			}
			//获取验证码
			that.time = this.intervals
			that.isCode = false
			that.code_tips = that.wait_code			
			var timer = setInterval(function() {
				that.time--
					if(that.time < 1) {
						clearInterval(timer);
						that.time = ''
						that.isCode = true
						that.code_tips = that.get_code
					}
			}, 1000)
			var url = this.url.getUserCode;
			if(this.type==0)
				var url = this.url.getRegCode;
			//发送短信
			globalData.ajaxPost(url, {
				"Mobile": that.Tel,
				"MsgType": 1
			}, function(res) {
				if(res.data.length == 4){
					that.code = res.data
				}
			})
		},
		check_code:function(){
			var that = this	
			console.log(that.input_code)
				console.log(that.code)
				console.log(this.item)
			if(!this.code_valide){
				$("#alert").modal()
				$("#alert p").text("验证码不正确")
			}else if(that.input_code != that.code){
				$("#alert").modal()
				$("#alert p").text("验证码不正确")
			}else{
				this.$emit("confirm_account_statement",that.code,that.item)
				that.reset_code()
			}
			
			
		}
	}
})